<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="./base.css"/>
    <script type="text/javascript" src="./jquery-1.11.0.js"></script>
    <script type="text/javascript" src="./iscroll.js"></script>
</head>
<body>
    <style type="text/css">
            #warpper{
                width:100%;
                height:500px;
                position:relative;
                overflow:auto;
            }
            .container{
                width:400%;
                height:100%;
                position:relative;
            }
            .part{
                display:inline-block;
                margin:0;
                padding:0;
                width:25%;
                height:100%;
            }
            .part.cyan{
                background: lightcyan;
            }
            .part.blue{
                background: lightblue;
            }
            .part.green{
                background:lightgreen;
            }
    </style>
    <div id="warpper">
        <div class="container">
            <div class="part green">
                1
            </div><div class="part blue">
                2
            </div><div class="part cyan">
                3
            </div><div class="part">
                4
            </div>
        </div>
    </div>
    <script type="text/javascript">
        new iScroll('warpper',{
            scrollX: true,
            scrollY: false,
            hScrollbar:false,
            vScrollbar:false,
            momentum: false,
            snapSpeed: 400,
            snap:'.part'
        });
        $('.part').on('click',function(){
            alert('click');
        });
    </script>
</body>
</html>